<script setup>
	import {
		onMounted,
		reactive,
		ref
	} from 'vue';
	const newsData = ref([])
	onMounted(() => {
		newsData.value = uni.getStorageSync('newsData')
	})

	const customTabbar = reactive({
		title: '全部新闻',
		iconState: true
	})

	function itemClick(item) {
		uni.setStorage({
			key: 'newsDetailsData',
			data: item
		})
		uni.navigateTo({
			url: '/pages/NewsDetails/NewsDetails'
		})
	}
</script>

<template>
	<NavigationBar :title="customTabbar.title" :iconState="customTabbar.iconState"
		@switchIconState="(state) => {customTabbar.iconState = state}"></NavigationBar>
	<view class="moreNews page">
		<scroll-view>
			<view class="navList">
				<ListNewsVue v-if="customTabbar.iconState" :list="newsData" @listItemClick="itemClick"></ListNewsVue>
				<NavNewsVue v-else :newsData="newsData" @navItemClick="itemClick"></NavNewsVue>
			</view>
		</scroll-view>
	</view>
</template>

<style scoped lang="scss">
	.moreNews {
		margin-top: 10vh;
		/* #ifdef H5 */
		margin-top: 5vh;
		/* #endif */
	}
</style>